<template>
  <div class="progress">
    <div class="progress-basic">
      <p class="progress-basic-title">栅格进度条</p>
      <div class="progress-basic-content">
        <div class="progress-item">
          <p>基础进度条</p>
          <vc-progress type="grid" :value="80" />
        </div>
        <div class="progress-item">
          <p>显示文字</p>
          <vc-progress type="grid" :value="80" :show-text="true" />
        </div>
        <div class="progress-item">
          <p>渐变背景</p>
          <vc-progress
            type="grid"
            :value="20"
            :background="['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 1)']"
          />
        </div>
        <div class="progress-item">
          <p>渐变颜色</p>
          <vc-progress
            type="grid"
            :value="80"
            :color="['rgba(255, 0, 0, 0.1)', 'rgba(255, 255, 0, 1)']"
          />
        </div>
        <div class="progress-item">
          <p>自定义高和间距</p>
          <vc-progress type="grid" :value="50" :height="20" :partGap="10" />
        </div>
        <div class="progress-item">
          <p>开启动画</p>
          <vc-progress type="grid" :value="50" :animate="true" />
        </div>
        <div class="progress-item">
          <p>循环动画</p>
          <vc-progress type="grid" :value="50" :animate="true" repeatCount="indefinite" />
        </div>
        <div class="progress-item">
          <p>animate原生效果</p>
          <vc-progress type="grid" :value="50" :animate="true" :animation="{repeatCount:'indefinite'}" />
        </div>
        <div class="progress-item">
          <p>竖向栅格进度条</p>
          <div class="flex align-center justify-between">
            <vc-progress type="verGrid" :value="10" />
            <vc-progress type="verGrid" :value="30" :background="['red','black']"  />
            <vc-progress type="verGrid" :value="50" :show-text="true"  />
            <vc-progress type="verGrid" :value="50" :show-text="true" textPosition="top"  />
            <vc-progress type="verGrid" :value="70" :animate="true"  />
            <vc-progress type="verGrid" :value="100" :color="['red','black']"  />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { CheckCircleFilled } from '@ant-design/icons-vue';
  const gradients = {
    id: 'svg-linear-gradient001',
    x1: '100%',
    y1: '100%',
    x2: '0%',
    y2: '0%',
    colorStops: [
      {
        offset: '0%',
        color: '#0ae787',
      },
      {
        offset: '100%',
        color: '#fe653c',
      },
    ],
  };
  const gradients2 = [
    {
      id: 'svg-linear-gradient002',
      x1: '100%',
      y1: '100%',
      x2: '0%',
      y2: '0%',
      colorStops: [
        {
          offset: '0%',
          color: 'rgba(255,255,255,1)',
        },
        {
          offset: '100%',
          color: 'rgba(0,0,0,1)',
        },
      ],
    },
    {
      id: 'svg-linear-gradient003',
      x1: '100%',
      y1: '100%',
      x2: '0%',
      y2: '0%',
      colorStops: [
        {
          offset: '0%',
          color: '#0ae787',
        },
        {
          offset: '100%',
          color: '#fe653c',
        },
      ],
    },
  ];
</script>

<style lang="less" scoped>
  .progress {
    &-basic {
      &-title {
        font-size: 18px;
        font-weight: 700;
        margin-left: 10px;
        margin-top: 15px;
      }
      &-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }
    }
    &-item {
      width: 50%;
      padding: 10px;
      .item {
        width: 25%;
        padding: 10px;
      }
    }
  }
</style>
